<!--月度接受检查情况统计分析-->
<template>
    <Layout class="menu-left">
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                <FormItem label="企业名称：" prop="order">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setCompanyId' @setOrgname='setCompanyName' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId"
                                  :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label='事故时间：' >
					<DatePicker class="query-form-el" v-model="dataToQuery.sartDateRange" format="yyyy-MM-dd"
								type="daterange" placement="bottom-end" placeholder="请选择事故时间段" :clearable="false"
								@on-change="(date) => onSelectFieldQueryDateRange(date, 'sartDate')"	></DatePicker>
                </FormItem>
                </Col>
<!--                <Col span="8">
                    <FormItem label="月份：" prop="month" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker> -
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
                    </FormItem>
                </Col>  -->
                <Col span="8">
					<Button type="primary" class="ivu-btn-reset" icon="md-cloud-download" @click="exportFormSubmit">导出</Button>
					<Button @click="reset" class="ivu-btn-reset">重置</Button>
					<Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="twoLevelOrg" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="8">
				<Card dis-hover>
				    <div ref="pieAccType" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="8">
				<Card dis-hover>
				    <div ref="pieInjuryLevel" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="8">
				<Card dis-hover>
				    <div ref="barInjuryLevel" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		
        <Modal title="安全事故详情" :transfer=false v-model="model1" :width=1200 footer-hide>
            <Table ref='table' :loading="loading" size="small" class="table" :height=500 no-data-text="没有查询到相关数据!"
                   highlight-row stripe border :columns="columns1" width="100%" :data="detailData">
            </Table>
             <Page :total="pagedata.total" :current="pagedata.fromPage" :pageSize="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
        </Modal>
    </Layout>
</template>
<script>
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '../../../../common/cacheUtils.js';
    import echarts from 'echarts'

    var cascaderDom = () => import('@/components/cascader-dom.vue');
    export default {
        components:{cascaderDom},
        data() {
            return{
                ...this.createCommonDataField(),
                // 切换标签
				currentPosition:"",
				currentType:"",
                // api
				loading:false,
				detailData:[],
				pageSizeArray: [10, 20, 50],
				pagedata: {
					total: 0,
					pageSize: 10,
					fromPage: 1,
				},
				model1:false,
				columns1:[
					{
						title: "序号",
						width: 80,
						align: "center",
						fixed: 'left',
						render: (h, params) => {
							return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
						}		
					},
					{
						title: '伤亡人员姓名',
						align: 'center',
						key: 'victim',
						minWidth: 150,
					},
					{
						title: '伤害程度',
						align: 'center',
						key: 'injuryLevelName',
						minWidth: 200,
					},
					{
						title: '歇工天数',
						align: 'center',
						key: 'daysWork',
						minWidth: 150,
					},
					{
						title: '直接经济损失(万元)',
						align: 'center',
						key: 'loseMoney',
						minWidth: 150,
					},
					{
						title: '工种或岗位',
						align: 'center',
						key: 'position',
						minWidth: 150,
					},
					{
						title: '事故时间',
						align: 'center',
						key: 'sartDateStr',
						minWidth: 150,
					},
					{
						title: '事故类别',
						align: 'center',
						key: 'accTypeName',
						minWidth: 150,
					},
					{
						title: '就业类型',
						align: 'center',
						key: 'membershipName',
						minWidth: 150,
					},
					{
						title: '上报单位',
						align: 'center',
						key: 'orgName',
						minWidth: 300,
						ellipsis: true
					},
				],
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                exportUrl:Api.exportBriefing,
                queryUrl: Api.getEchatBriefing
            }
        },
        mounted(){
            // this.dataToQuery.companyId = this.currentUser.companyId
			// this.dataToQuery.companyName = this.currentUser.companyName
            this.dataToQuery.sartDateRange = [new Date().getFullYear() + '-01-01', new Date().getFullYear() + '-12-31']
			this.query();
        },
        methods: {
            ...pageCommonFunction,
            setCompanyName(data) {
                this.$set(this.dataToQuery, 'companyName', data)
            },
            setCompanyId(data) {
                if (data && data instanceof Array && data.length > 0) {
                    this.dataToQuery.companyId = data[data.length - 1];
                } else {
                    this.dataToQuery.companyId = null;
                }
            },
            query() {
				let date = {...this.dataToQuery}
                if (!this.dataToQuery.companyId || !this.dataToQuery.companyName) {
                    date.companyId = this.currentUser.companyId,
                    date.companyName = this.currentUser.companyName
                }
                let twoLevelOrgChart = echarts.init(this.$refs.twoLevelOrg);
                let pieAccTypeChart = echarts.init(this.$refs.pieAccType);
                let pieInjuryLevelChart = echarts.init(this.$refs.pieInjuryLevel);
                let barInjuryLevelChart = echarts.init(this.$refs.barInjuryLevel);

                this.$http.post(this.queryUrl, date).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    let map = res.data.data;

                    let twoLevelOrgOption = this.getTwoLevelOrgOption();
                    twoLevelOrgOption.series[0].data = map.twoLevelOrgMap.dayWorks
                    twoLevelOrgOption.series[1].data = map.twoLevelOrgMap.loseMoneys
                    twoLevelOrgOption.series[2].data = map.twoLevelOrgMap.qings
                    twoLevelOrgOption.series[3].data = map.twoLevelOrgMap.zhongs
                    twoLevelOrgOption.series[4].data = map.twoLevelOrgMap.deads
                    twoLevelOrgOption.xAxis[0].data = map.twoLevelOrgMap.orgNames
                    twoLevelOrgChart.setOption(twoLevelOrgOption);
                    window.onresize = twoLevelOrgChart.resize;

                    let pieAccTypeOption = this.getPieAccTypeOption();
                    pieAccTypeOption.series[0].data = map.pieAccTypeList;
                    pieAccTypeChart.setOption(pieAccTypeOption);
                    window.onresize = pieAccTypeChart.resize;

                    let pieInjuryLevelOption =  this.getPieInjuryLevelOption();
                    pieInjuryLevelOption.series[0].data = map.pieInjuryLevelList;
                    pieInjuryLevelChart.setOption(pieInjuryLevelOption);
                    window.onresize = pieInjuryLevelChart.resize;

                    let barInjuryLevelOption =  this.getBarInjuryLevelOption();
                    barInjuryLevelOption.series[0].data = map.barInjuryLevelMap.series
                    barInjuryLevelOption.xAxis[0].data = map.barInjuryLevelMap.xAxis
                    barInjuryLevelChart.setOption(barInjuryLevelOption);
                    window.onresize = barInjuryLevelChart.resize;

                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },


            getTwoLevelOrgOption(){
                let option = {
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        data: ['歇工总天数','直接经济损失(万元)','轻伤人数',
                            '重伤人数','死亡人数']
                    },
                    color:['#FD5C50','#FF9800', '#FDD835', '#40C4FF', '#FF3E80'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '8%',
                        containLabel: true,
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider',
                        textStyle:false
                    }],
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                interval: 0,
                                formatter:function(value){
                                    var str = "";
                                    var num = 6; //每行显示字数
                                    var valLength = value.length; //该项x轴字数
                                    var rowNum = Math.ceil(valLength / num); // 行数
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            temp = value.substring(start, end) + "\n";
                                            str += temp;
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '歇工总天数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data:[]
                        },
                        {
                            name: '直接经济损失(万元)',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        },
                        {
                            name: '轻伤人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        },
                        {
                            name: '重伤人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        },
                        {
                            name: '死亡人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        }
                    ]
                };
                return option;
            },

            getBarInjuryLevelOption(){
                let option = {
                    title: {
                        text: '伤亡人数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // legend: {	//图例组件
                    //     data: ['伤亡人数统计']
                    // },
                    color:['#FD5C50'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '8%',
                        containLabel: true,
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider',
                        textStyle:false
                    }],
                    xAxis: [
                        {
                            type: 'category',
                            data: [],//动态
                            axisLabel: {
                                interval: 0,
                                formatter:function(value){
                                    var str = "";
                                    var num = 6; //每行显示字数
                                    var valLength = value.length; //该项x轴字数
                                    var rowNum = Math.ceil(valLength / num); // 行数
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            temp = value.substring(start, end) + "\n";
                                            str += temp;
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            // name: '伤亡人数统计',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [] //动态
                        },
                    ]
                };
                return option;
            },

            getPieInjuryLevelOption(){
                let option = {
                    title: {
                        text: '伤亡人数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        data: ['轻伤人数', '重伤人数', '亡人人数']
                    },
                    color:['#42A5F5', '#FFC310','#FF3E80'],
                    series: [
                        {
                            // name: '事故人数',
                            type: 'pie',
                            radius: '60%',
                            center: ['40%', '50%'],
                            label: {
                                formatter: '{@2012} ({d}%)'
                            },
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },
            getPieAccTypeOption(){
                let option = {
                    title: {
                        text: '事故数量统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color:['#42A5F5', '#FF3E80', '#FFC310', '#1DE9B6','#FD5C50','#FF9800','#92ffd0'],
                    series: [
                        {
                            name: '事故数量',
                            type: 'pie',
                            radius: '60%',
                            center: ['40%', '50%'],
                            label: {
                                formatter: '{@2012} ({d}%)'
                            },
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },
			sizeChange(size) {
                this.pagedata.pageSize = size
                this.pagedata.fromPage = 1
                this.queryDetail(this.currentPosition,this.currentType)
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.queryDetail(this.currentPosition,this.currentType)
            },
			queryDetail(position,type){
				this.currentPosition = position;
				this.currentType = type;
				this.loading = true;
				this.model1 = true;
				var orgId = "";
				if(this.dataToQuery.companyId != ""&& this.dataToQuery.companyId != undefined){
					orgId = this.dataToQuery.companyId
				}
				else{
					orgId = sessionStorage('userId').getObject('userId').companyId;
				}
				let data = {
					startPage: this.pagedata.fromPage,
					size: this.pagedata.pageSize,
					orgId: orgId
				};
				if(type == "经济损失")
					data.type = "0";
				else if(type == "重伤人数"){
					data.type = "1";
					data.injuryLevels = "1000001019000000002"
				}
				else if(type == "死亡人数"){
					data.type = "2";
					data.injuryLevels = "1000001019000000003"
				}
				data.position = position;	
				let url = Api.briefing
				this.$http.get(url, {params: data}).then((res) => {
					this.detailData = res.data.data.data;
					this.pagedata.total = res.data.data.totalSize;
					this.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
				})
			}
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
